<template>
  <el-dialog v-model="dialog" :title="title" width="800px" center>
    <el-container>
      <el-main>
        <!-- 主题 -->
        <div class="title">{{ message.message_title }}</div>
        <!-- 内容 -->
        <div class="content" v-html="message.message_content"></div>
      </el-main>
      <el-aside width="200px">
        <div class="publish-msg" v-if="message.message_category == '公司公告'">发布部门：{{ message.message_publish_department
          }}</div>
        <div class="publish-msg">发布人：{{ message.message_publish_name }}</div>
        <div class="publish-msg">类别：{{ message.message_category }}</div>
        <div class="publish-msg" v-if="message.message_category == '公司公告'">等级：
          <el-tag class="mx-1" round v-if="message.message_level == '一般'">{{ message.message_level }}</el-tag>
          <el-tag type="warning" class="mx-1" round v-if="message.message_level == '重要'">{{ message.message_level
            }}</el-tag>
          <el-tag type="danger" class="mx-1" round v-if="message.message_level == '必要'">{{ message.message_level
            }}</el-tag>
        </div>
        <div class="publish-msg">发布时间：{{ message.message_publish_time?.slice(0, 10) }}</div>
      </el-aside>
    </el-container>
  </el-dialog>
</template>

<script lang='ts' setup>
import { reactive, Ref, ref } from 'vue'
const title = ref()

interface Message {
  message_title: string;
  message_content: string;
  message_publish_department: string;
  message_category: string;
  message_level: string;
  message_publish_name: string;
  message_publish_time: string;
}

let message: Ref<Message> = ref({
  message_title: '',
  message_content: '',
  message_publish_department: '',
  message_category: '',
  message_level: '',
  message_publish_name: '',
  message_publish_time: '',
})

// 弹窗默认为false
const dialog = ref(false)
// 暴露open
const open = (row: any) => {
  dialog.value = true
  message.value = row

}
defineExpose({
  open
})


</script>

<style lang="scss" scoped>
.el-main {
  min-height: 500px;
  --el-main-padding: 0px;
  border-right: 1px solid #eee;
}

.el-aside {
  padding-right: 8px;
}

.title {
  height: 32px;
  line-height: 32px;
  font-size: 16px;
  margin-bottom: 8px;
  margin-left: 8px;
  border-bottom: 1px solid #eee;
}

.content {
  text-align: center;
}

.publish-msg {
  height: 32px;
  line-height: 32px;
  font-size: 16px;
  margin-bottom: 8px;
  margin-left: 8px;
  border-bottom: 1px solid #eee;
}
</style>